<template>
    <div class="home">
        <!-- navbar -->
        <nav-bar class="navbar" >
            <div slot="middle">购物街</div>
        </nav-bar>
        <TabContral class="tabContral" :tabs="['流行','新款','精选']" @getTabIndex="getTabIndex" ref="tabContralTop1" v-show="isFixed"></TabContral>
        <Scroll class="content" ref="scroll" :probe-type="3" @scrollTop="scrollTop" :pull-up-load="true" @pullingUp="loadMore">
             <!-- 轮播图 -->
            <Swiper :banners="banners" @imageitemLoad="imageitemLoad">
            </Swiper>
            <!-- 广告 -->
            <Recommend :recommend="recommend"></Recommend>
            <!-- 流行 -->
            <HomeFeatureView></HomeFeatureView>
            <!-- tab -->
            <TabContral :tabs="['流行','新款','精选']" @getTabIndex="getTabIndex" ref="tabContralTop2" ></TabContral>
            <!-- goodslist列表 -->
            <GoodsList :goodsList="showGoods"></GoodsList>
        </Scroll>
        <BackTop @click.native='detailToTop' v-show="isScrollTop"></BackTop>

    </div>
</template>

<script>
import {require} from 'network/request'
import {getHomeMultidata} from 'network/home'
import {getHomeData} from 'network/home'
import {doc} from 'components/common/untils.js'
import {backTopMixin}  from '../../components/common/mixin'

import NavBar from 'components/common/navbar/NavBar'
import Swiper from 'components/common/Swiper/Swiper'
import TabContral from 'components/coments/Tabcontral/TabContral'
import GoodsList from 'components/coments/GoodList/GoodsList'
import Scroll from 'components/common/Scroll/Scroll'
// import BackTop from 'components/coments/BackTop/BackTop'

import Recommend from './ChildComps/Recommend'
import HomeFeatureView from './ChildComps/Feature'

export default {
    components: { 
        NavBar,
        Swiper,
        Recommend,
        HomeFeatureView,
        TabContral,
        GoodsList,
        Scroll,
        // BackTop
    },
    mixins: [backTopMixin],
    data () {
        return {
            //轮播图列表
            banners:[],
            recommend:[],
            goods:{
                'pop':{page:0,list:[]},
                'new':{page:0,list:[]},
                'sell':{page:0,list:[]}
            },
            currentType:'new',
            //是否显示置顶小箭头
            // isScrollTop:false,
            //TabContral高度
            tabOffsetTop:0,
            //是否吸顶
            isFixed:false,
            //保存y
            saveY:0
            
        }
    },
    //一切换到首页进行冲刷新
//解决了从其他页面返回来滚动不了情况
    activated () {
      this.$refs.scroll.refresh() 
      //再次返回首页时滚到之前位置 
      this.$refs.scroll.scrollTo(0,this.saveY,0)
    },
    //离开时候记录位置
    deactivated () {
        this.saveY = this.$refs.scroll.scroll.y
    },
    created () {
        // 网络请求相关
        this.getHomeLists()
         // 2.请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    mounted () {
        // 3监听item中图片加载完成
        const refresh = doc(this.$refs.scroll.refresh,400)
        this.$bus.$on('itemImageLoad',()=>{
            // this.$refs.scroll为什么写这个代码 再你切换到别的组件再回到home时图片如果先到了
            // refresh会underfinde指向不到scroll实例 
            refresh()
        })
    },
    methods: {
        // 网络请求相关方法
           getHomeLists(){
                getHomeMultidata().then(res=>{
                this.banners =res.data.banner.list,
                this.recommend=res.data.recommend.list
            })
           },
           getHomeGoods(type){
                const page = this.goods[type].page+1
                //初始页为1发送请求请求第一页数据
                getHomeData(type,page).then(res=>{
                    console.log(res);
                    // 将数据push到list中后此类型得页码加一
                    this.goods[type].list.push(...res.data.list) 
                    this.goods[type].page+=1

                    //结束上拉加载行为
                    this.$refs.scroll.scroll.finishPullUp()
                     
                })
           },   
           // 事件监听相关得
           getTabIndex(index){
                switch (index) {
                    case 0:
                        this.currentType='new'
                        break;
                    case 1:
                        this.currentType='pop'
                        break;
                    case 2:
                        this.currentType='sell'
                        break;
                
                }
                //让两个tabcontral保持一致
                this.$refs.tabContralTop2.currentIndex=index
                this.$refs.tabContralTop1.currentIndex=index
                // console.log();
                
           },
            //回到顶部方法用了混入
            //    detailToTop(){
            //     this.$refs.scroll.scrollTo(0,0)
            //    },
           scrollTop(position){
               //拖得高度大于1000将置顶小箭头显示出来
               this.isScrollTop = -position.y>1000
               //高度大于504吸顶
               this.isFixed = (-position.y)>this.tabOffsetTop
           },
           loadMore(){
            //    console.log('上拉加载更多');
                this.getHomeGoods(this.currentType)
           },
           //轮播图加载完事件
           imageitemLoad(){
               //504   console.log(this.$refs.tabContralTop.$el.offsetTop);
            this.tabOffsetTop=this.$refs.tabContralTop2.$el.offsetTop

           }

        },
    computed: {
        showGoods(){
            return this.goods[this.currentType].list
        }
    }


    };

</script>

<style lang="less" scoped>
.home{
    position: relative;
    height: 100vh;
}
.navbar{
    background-color: pink;
    color: white;
    font-size: 18px;
    width: 100%;
    /* height: 44px; */
    /* 用了bscroll可对上面不做处理也不会影响下面 */
    /* position: fixed;
    left: 0;
    right:0;
    top: 0; */
    position: relative;
    z-index: 9;
 
}
.tabContral{
    /* position: sticky;
    top: 44px; 
    z-index: 9; */
    position: relative;
    z-index: 9;

}
.content{
    position: absolute;
    top:44px;
    bottom: 49px;
    left: 0;
    right: 0;
    overflow: hidden;
}

</style>

